/**
 * 数据点列表
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cass from 'classnames';
import _ from 'lodash';
import { Table, Checkbox, Button, Tooltip } from 'antd';
import shouldComponentUpdate from '../../../components/decorator/shouldComponentUpdate';
import css from '../../../themes/index.less';

@shouldComponentUpdate
class DataPointTable extends Component {
	constructor(props, context) {
		super(props, context);
		this.columns = [{
		title: '标示名',
			dataIndex: 'identityName',
			key: 'identityName',
		}, {
			title: '显示名称',
			dataIndex: 'showName',
			key: 'showName',
		}, {
			title: '备注',
			dataIndex: 'remark',
			key: 'remark',
			render: text => (
				<Tooltip title={text}>
					{_.truncate(text, { length: 16 })}
				</Tooltip>
			)
		}, {
			title: '需要监控点',
			dataIndex: 'isMonit',
			key: 'isMonit',
			render: (checked, point) => <Checkbox checked={!!checked} onChange={this.props.onCheck} id={point.id} />
		}];
	}

	render() {
		const { dataSource, onSync } = this.props;
		return (
			<div>
				<div className={cass(css.layout, css.lr)}>
					<div>数据点</div>
					<div className={css.right}><Button onClick={onSync} icon="swap" className="opt-but">同步</Button></div>
				</div>
				<Table
					dataSource={dataSource}
					columns={this.columns}
					size="small"
					pagination={{
						size: 'small',
						total: dataSource.length
					}}
				/>
			</div>
		);
	}
}

DataPointTable.propTypes = {

};

export default DataPointTable;
